<template>
  <!-- 弹框 -->
  <el-dialog title="搜索市场活动" :visible.sync="dialogVisible" width="60%">
    <!-- 搜索框 -->
    <el-input v-model="searchQuery" placeholder="请输入市场活动名称，支持模糊查询" clearable style="width: 300px;padding-right: 5px;">
    </el-input>
    <el-button :icon="Search" circle @click="search" />

    <div style="padding-top: 5px;">
      <el-table :data="tableData" border style="width: 100%">
        <!-- 自定义多选框 -->
        <el-table-column width="55">
          <template #default="{ row }">
            <el-checkbox v-model="selectedRows" :value="row.id" @change="change(row.id,row.name)" />
          </template>
        </el-table-column>

        <!-- 数据列 -->
        <el-table-column prop="name" label="名称" width="150"></el-table-column>
        <el-table-column prop="startDate" label="开始日期" width="120"></el-table-column>
        <el-table-column prop="endDate" label="结束日期" width="120"></el-table-column>
        <el-table-column prop="owner" label="所有者"></el-table-column>
      </el-table>
    </div>


  </el-dialog>
</template>

<script setup>
import { ref, defineProps, watch,inject  } from "vue";
import requestUtil from "@/util/request";

import { Search } from '@element-plus/icons-vue'

const pops = defineProps(['clueId', 'activiyTableVisible','setMarketSource']);
// 表格数据
const tableData = ref([]);
// 搜索框输入内容
const searchQuery = ref("");
// 存储已选中的行数据（每次最多选择一列数据）
const selectedRows = ref([]);
const selectedValue = ref('');
const search = async () => {
  const res = await requestUtil.getRestFulApi("crmClueActivityRelation/queryActivityForConvertByNameClueId/{clueId}", { clueId: pops.clueId }, { name: searchQuery.value })
  tableData.value = res.data.data
}
watch(
  () => pops.activiyTableVisible,
  () => {
    let id = pops.clueId;
    if (id != "" && pops.activiyTableVisible) {
      initActivityData(id);
    }
  }
)

const change = (id,name) => {
  if (selectedValue.value == id) {
    selectedRows.value = []
    selectedValue.value = ''
  } else {
    selectedRows.value = []
    selectedRows.value.push(id)
    selectedValue.value = id
    pops.setMarketSource(id,name)
  }

}

const initActivityData = async (id) => {
  const res = await requestUtil.getRestFulApi("crmClueActivityRelation/queryActivityForConvertByNameClueId/{clueId}", { clueId: id })
  tableData.value = res.data.data

}

</script>

<style>
/* 可选样式 */
</style>